/* 盒子 */
body{
    display: flex;
    /* justify-content: space-evenly; */
    flex-wrap: wrap;
}

/* 圆点 */
.ball{
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
}

/* 圆点位置 */

/* 一个圆 */
.one{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
}
.two{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}
.three{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
}
.four{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-self: flex-start;
    align-items: center;
}
.five{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.six{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content:flex-end;
    align-items: center;
}
.seven{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
.eight{ 
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.nine{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

/* 两个圆 */
.ten{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.eleven{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.twelve{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.thirteen{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.fourteen{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* 三个圆 */
.fifteen{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
}
.fifteen .ball:nth-child(2){
    align-self: center;
}
.fifteen .ball:nth-child(3){
    align-self: flex-end;
}

/* 四个圆 */
.sixteen{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.sixteen .box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 五个圆 */
.seventeen{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.seventeen .box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.seventeen .box:nth-child(2){
    align-self: center;
}

/* 六个圆 */
.eighteen{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.eighteen .box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

